<template>
	<view class="contain">
		<view class="log">
			<image :src="'/image/logo-a.png' | formatImgUrl" mode="" class="logo"></image>
			<image :src="'/image/dir.png' | formatImgUrl" mode="" class="dir"></image>
			<image :src="'image/wechat.png' | formatImgUrl" mode="" class="logo"></image>
		</view>
		<view class="title">
			绑定账号至微信公共号
		</view>
		<u-checkbox-group v-model="value">
		<u-checkbox
		      :customStyle="{marginBottom: '8px'}"
		      label="绑定后，可以通过微信公众号方便地接收相关的通知和消息，并享受更多的便利和功能。"
		      name="绑定后，可以通过微信公众号方便地接收相关的通知和消息，并享受更多的便利和功能。"
			  class="radio"
		      @change="radioChange"
			  labelSize='12'
			  labelColor="#999999"
			  iconSize="16"
			  activeColor="#45C4B0"
			  shape='circle'
		    >
		</u-checkbox>
		</u-checkbox-group>
		<button class="sub">确认绑定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:false
			}
		},
		methods: {
			radioChange(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.contain{
		padding: 60rpx;
		.log{
			margin-top: 180rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.logo{
				width: 112rpx;
				height: 112rpx;
				&:last-child{
					border: 1px dashed #45C4B0;
				}
			}
			.dir{
				width: 36rpx;
				height: 14rpx;
				margin: 0 42rpx;
				border: 1px dashed #45C4B0;
			}
		}
		.title{
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			color: #030303;
			margin-top: 34rpx;
			margin-bottom: 200rpx;
		}
		.sub{
			width: 262rpx;
			height: 80rpx;
			display: block;
			border-radius: 16rpx;
			margin: 34rpx auto 0 !important;
			line-height: 80rpx;
			background: #45C4B0 !important;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		.u-checkbox-group--row{
			flex-direction:column !important;
		}
	}
</style>
